<template>
  <div class="echart" ref='echarts'>
  
    <ul>
      <el-collapse-transition>
  
        <li v-if='c1.close'>
    
          <h3 class='title'>
    
            <span>年龄结构</span>
    
            <span>
    
             <i class="fa fa-minus" v-if='c1.min' @click.stop='c1.min = false'></i>

              <i class="fa fa-plus" v-else @click.stop='c1.min = true'></i>

              <i class="fa fa-times" @click.stop='c1.close = false'></i>

            </span>
    
          </h3>
          <el-collapse-transition>
            <div id='content1' v-show='c1.min' style='width:100%;height:420px'></div>
          </el-collapse-transition>
        </li>

      </el-collapse-transition>

       <el-collapse-transition>
        <li v-if='c2.close'>
    
          <h3 class='title'>
    
            <span>学历结构</span>
    
             <span>
    
              <i class="fa fa-minus" v-if='c2.min' @click.stop='c2.min = false'></i>

              <i class="fa fa-plus" v-else @click.stop='c2.min = true'></i>

              <i class="fa fa-times" @click.stop='c2.close = false'></i>

            </span>
    
          </h3>
          <el-collapse-transition>
           <div id='content2' v-show='c2.min' style='width:100%;height:420px'></div>
          </el-collapse-transition>  
        </li>
       </el-collapse-transition>

      <el-collapse-transition>
          <li v-if='c3.close'>
      
            <h3 class='title'>
      
              <span>性别分布</span>
      
               <span>
    
                  <i class="fa fa-minus" v-if='c3.min' @click.stop='c3.min = false'></i>

                  <i class="fa fa-plus" v-else @click.stop='c3.min = true'></i>

                  <i class="fa fa-times" @click.stop='c3.close = false'></i>

                </span>
      
            </h3>
            <el-collapse-transition>
               <div id='content3' v-show='c3.min' style='width:100%;height:420px'></div>
             </el-collapse-transition>
          </li>
      </el-collapse-transition>
    </ul>
  
    <el-dialog size='' :visible.sync="dialogTableVisible" top='8vh'>
  
      <el-table :data="tableData" style="width:800px" stripe>
  
        <el-table-column property="emplid" label="员工编号"></el-table-column>
  
        <el-table-column property="name" label="姓名"></el-table-column>
  
        <el-table-column property="dept_descr" min-width="180"  label="所在部门"></el-table-column>
  
        <el-table-column label="操作"  width="150">
  
          <template slot-scope="scope">
  
                  <el-button 
  
                     size="mini"
  
                     type="primary" @click="ComputedEmplid(scope)">干部任免审批表</el-button>
          </template>
        </el-table-column>
      </el-table> 

    
          <el-pagination
              @current-change='currentChange'	
              :page-size="10"
              layout="total, prev, pager, next"
              :total="total"
              style='margin-top:20px;padding:0px;margin-left:-6px'
              >
            </el-pagination>
           <!-- <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogTableVisible = false">关闭</el-button>
          </span> -->
        </el-dialog>
    </div>
</template>

<script>

import CollapseTransition from 'element-ui/lib/transitions/collapse-transition'

import echarts from 'echarts'

import Vue from 'vue'

import URL from '../../common/js/dataLookUrl'
import { _encode } from '@/common/js/handleCode'

import {

	Table,

	TableColumn,

	Dialog,

	Button,

	Pagination

} from 'element-ui'

Vue.use(Table)

Vue.use(TableColumn)

Vue.use(Dialog)

Vue.use(Button)

Vue.use(Pagination)

Vue.component(CollapseTransition.name, CollapseTransition)


export default {

	props: ['res', 'title'],

	data () {

		return {

			c1: {

				min: true,

				close: true

			},

			c2: {

				min: true,

				close: true

			},

			c3: {

				min: true,

				close: true

			},

			tableData: [],

			total: 0,

			dialogTableVisible: false,

			ageName: '',

			sex: '',

			leaderUnit: '',

			highestEdu: ''

		}

	},

	computed: {

		leaderType () {

			if (this.title == '集团领导') {

				return 'A'

			} else {

				return 'B'

			}

		}

	},

	mounted () {

		if (this.$refs.echarts) {

			let ageData = [{

				value: this.res.info.fiftyabovecount,

				name: '50岁以上人数：' +

          this.res.info.fiftyabovecount +

          '人(' +

          this.res.info.fiftyabovescale +

          ')'

			},

			{

				value: this.res.info.fortytofiftysdcount,

				name: '45岁到50岁人数：' +

          this.res.info.fortytofiftysdcount +

          '人(' +

          this.res.info.thirtytofortysdscale +

          ')'

			},

			{

				value: this.res.info.thirtytofortysmcount,

				name: '40岁到45岁人数：' +

          this.res.info.thirtytofortysmcount +

          '人(' +

          this.res.info.thirtytofortysmscale +

          ')'

			},

			{

				value: this.res.info.thirtytofortycount,

				name: '30岁到40岁人数：' +

          this.res.info.thirtytofortycount +

          '人(' +

          this.res.info.thirtytofortyscale +

          ')'

			},

			{

				value: this.res.info.thirtybelowcount,

				name: '30岁以下人数：' +

          this.res.info.thirtybelowcount +

          '人(' +

          this.res.info.thirtybelowscale +

          ')'

			}

			]



			let educationData = []



			this.res.education.forEach((ele, i) => {

				educationData.push({

					value: this.res.education[i].educount,

					name: `${this.res.education[i].highest_edu || '未填写'}：${this.res

						.education[i].educount}人(${this.res

						.education[i].eduscale})`

				})

			}, this)



			let sexData = [{

				value: this.res.info.boycount,

				name: `男：${this.res.info.boycount}人(${this.res.info.boyscale})`

			},

			{

				value: this.res.info.grilcount,

				name: `女：${this.res.info.grilcount}人(${this.res.info.grilscale})`

			},

			{

				value: this.res.info.othercount,

				name: `未知：${this.res.info.othercount}人(${this.res.info.otherscale})`

			}

			]



			this.$nextTick(function () {
				this.drawPie('#content1', ageData.filter(ele=>ele.value!=0), '年龄分布', '55%')

			})



			this.$nextTick(function () {

				this.drawPie('#content2', educationData.filter(ele=>ele.value!=0), '学历结构', ['40%', '60%'])

			})



			this.$nextTick(function () {

				this.drawPie('#content3', sexData.filter(ele=>ele.value!=0), '性别分布', '55%', true)

			})

		}

	},



	methods: {

		ComputedEmplid (data) {

			let sex = data.row.sex_descr == '女' ? 2 : 1
			const params = {
				emplid: data.row.emplid,
				sex
			}

			window.open('/module/leaderAppoint.html?' + _encode(JSON.stringify(params)))

		},

		drawPie (id, datas, name, type, showFlag) {

			this.charts = echarts.init(this.$refs.echarts.querySelector(id))

			this.charts.setOption({

				tooltip: {

					trigger: 'item',

					formatter: '{b}'

				},



				legend: {

					show: showFlag,

					x: 'left',

					data: datas,

					formatter: function (val) {

						return val.split('：')[0]

					}

				},

				series: [{

					name: name,

					type: 'pie',

					radius: type,

					center: ['50%', '50%'],

					data: datas,



					label: {

						normal: {

							show: true,

							formatter: function (val) {

								return val.name.split('：').join('\n')

							}

						}

					},



					labelLine: {

						normal: {

							lengh: 10,

							length2: 10

						}

					}

				}]

			})



			this.charts.on('click', echartsData => {

				let Dataname = echartsData.data.name.split('：')[0]

				this.ageName = ''

				this.sex = ''

				this.highestEdu = ''



				switch (Dataname) {

				case '30岁以下人数':

					this.ageName = 'thirtybelow'

					break

				case '30岁到40岁人数':

					this.ageName = 'thirtytoforty'

					break



				case '40岁到45岁人数':

					this.ageName = 'fortysvfifty'

					break

				case '45岁到50岁人数':

					this.ageName = 'fortysyfifty'

					break

				case '50岁以上人数':

					this.ageName = 'fiftyabove'

					break

				case '男':

					this.sex = 'M'

					break

				case '女':

					this.sex = 'F'

					break

				case '未知':

					this.sex = 'Y'

					break

				case '未填写':

					this.highestEdu = 'empty'

					break

				default:

					this.highestEdu = Dataname

					break

				}





				let params = {}



				if (this.ageName) {

					params = {

						leaderType: this.leaderType,

						ageRange: this.ageName,

						pageNum: 1,

						pageSize: 10

					}

				} else if (this.sex) {

					params = {

						leaderType: this.leaderType,

						sex: this.sex,

						pageNum: 1,

						pageSize: 10

					}

				} else {

					params = {

						leaderType: this.leaderType,

						highestEdu: this.highestEdu,

						pageNum: 1,

						pageSize: 10

					}

				}



				this.Axios.Post(URL.getempleMaintainBylist.url, params).then(res => {

					this.tableData = res.data.datas

					this.total = res.data.total

				})

				this.dialogTableVisible = true

			})

		},

		currentChange (index) {

			let params = {}

			let pageNum = index

			if (this.ageName) {

				params = {

					leaderType: this.leaderType,

					ageRange: this.ageName,

					pageNum: pageNum,

					pageSize: 10

				}

			} else if (this.sex) {

				params = {

					leaderType: this.leaderType,

					sex: this.sex,

					pageNum: pageNum,

					pageSize: 10

				}

			} else {

				params = {

					leaderType: this.leaderType,

					highestEdu: this.highestEdu,

					pageNum: pageNum,

					pageSize: 10

				}

			}



			this.Axios.Post(URL.getempleMaintainBylist.url, params).then(res => {

				this.tableData = res.data.datas

				this.total = res.data.total

			})

		}

	}

}
</script>

<style scoped>
.echart {
  margin-top: 20px;
}

.echart ul {
  display: flex;

  flex-wrap: wrap;

  margin-bottom: 40px;
}

.echart li {
  border-top-width: 3px;

  border-top-style: solid;

  border-top-color: #00a65a;

  width: 48.5%;

  margin-bottom: 30px;

  overflow: hidden;
}

.echart li div,
.echart li h3 {
  background-color: #fff !important;
}

.echart li:nth-of-type(2n-1) {
  margin-right: 3%;
}

.echart .title {
  border-bottom: 1px solid #f1f1f1;

  line-height: 40px;

  display: flex;

  justify-content: space-between;

  padding: 0 10px;
}

.echart .title span:first-of-type {
  font-size: 18px;

  font-family: 'Microsoft YaHei', museo-slab, 'Helvetica Neue', Helvetica, Arial,
    sans-serif;

  color: rgb(68, 68, 68);

  font-weight: normal;
}

.echart .title span:last-of-type {
  font-size: 14px;

  font-family: 'Microsoft YaHei', museo-slab, 'Helvetica Neue', Helvetica, Arial,
    sans-serif;

  color: rgb(151, 160, 179);

  font-weight: normal;
}

.echart .title span:last-of-type i {
  margin-left: 10px;
}

.echart .title i {
  cursor: pointer;
}
</style>